<meta charset="UTF-8">
<style>

    .selected {
        font-weight: bold;
        background: #ff99cc;
        color: #fff;
    }

</style>
<script>
    var title = "发票虚开分析"
</script>
<title>发票虚开分析</title>
<!--<div class="layui-fluid">-->

<div class="layui-tab layui-tab-card" style="margin-top: 0;box-shadow:0 0 0 0">
    <ul class="layui-tab-title">
        <li class="layui-this">增值税发票虚开预测-专家经验模式</li>
        <li>增值税发票虚开预测-机器学习模式</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div class="layui-row layui-col-space15">
                <div id="xk-table-zjjy" class="layui-col-md5" style="padding-right: 0">

                    <div class="layui-card">
                        <div class="layui-card-header layui-icon layui-icon-group" style="text-align: center">
                            高风险虚开企业名单
                        </div>
                        <div class="layui-card-body">
                            <table id="test-table-xk" lay-filter="test-table-xk"></table>
                            <script type="text/html" id="zizeng">
                                {{d.LAY_TABLE_INDEX+1}}
                            </script>
                        </div>

                    </div>
                </div>
                <div id="xk-chart-zjjy" class="layui-col-md7">
                    <div class="layui-card">
                        <!--                            <div id="xk-yhhx-1"-->
                        <!--                                 style=" width: 100%;display: block"></div>-->
                        <div style="position: absolute;padding: 12px 0 0 12px;z-index: 1000;cursor:pointer">
                            <i id="xk-tb-icon" class="layui-icon layui-icon-shrink-right"></i>
                        </div>
                        <div id="status" class="layui-form" action="" style="position: absolute;padding: 2px 18px 0 0;
                                                                                right: 0;
                                                                                width: 215px;
                                                                                z-index: 1001;">

                            <div class="layui-form-item" style="">
                                <label class="layui-form-label">当前状态：</label>
                                <div class="layui-input-block">
                                    <select name="status" style="
                                        border: 0;
                                        -moz-appearance:none; /* Firefox */
                                        -webkit-appearance:none; /* Safari 和 Chrome */
                                        ">
                                        <!--                                            <option value=""></option>-->
                                        <option value="0">税务发现</option>
                                        <option value="1">税务检查</option>
                                        <option value="2">税务报送</option>
                                        <option value="3">稽查选案</option>
                                        <option value="4">稽查检查</option>
                                        <option value="5">稽查审理</option>
                                        <option value="6">稽查送达</option>
                                        <option value="7">稽查归档</option>
                                        <option value="8">税务归档</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="layui-card-header layui-icon layui-icon-link" style="text-align: center">
                            <span>高风险虚开企业详情</span>

                            <!--                            <i class="layui-icon" style="float: right">&#xe60f;</i>-->
                            <!--                            <div style="float: right" class="option">-->
                            <!--                                <span onclick="changeStatus()"><a href="javascript:">税务发现</a></span>-->
                            <!--                                <ul id="status" style="display: none">-->
                            <!--                                    <li><a href="javascript:">税务发现</a></li>-->
                            <!--                                    <li><a href="javascript:">税务检查</a></li>-->
                            <!--                                    <li><a href="javascript:">税务报送</a></li>-->
                            <!--                                    <li><a href="javascript:">稽查选案</a></li>-->
                            <!--                                    <li><a href="javascript:">稽查检查</a></li>-->
                            <!--                                    <li><a href="javascript:">稽查审理</a></li>-->
                            <!--                                    <li><a href="javascript:">稽查送达</a></li>-->
                            <!--                                    <li><a href="javascript:">稽查归档</a></li>-->
                            <!--                                    <li><a href="javascript:">税务归档</a></li>-->
                            <!--                                </ul>-->


                            <!--                            </div>-->

                            <!--                                                                                    <cite  class="layui-icon layim-status-hide "style="color: #00FF00">&#xe60f;</cite>-->
                            <!--                                                        <span style="float: right"></span>-->


                        </div>


                        <div class="layui-card-body ">
                            <div id="echats-title" style=" text-align:center;
                            width: 100%;
                            font-weight: bold;
                            /*padding-top: 50px;*/
                            font-size: 20px;
                            position: absolute;
                            z-index: 1000">

                                <span id="nsrxx-msg"></span>
                            </div>

                            <div id="xk-yhhx-1"
                                 style=" width: 100%;"></div>
                        </div>

                    </div>


                </div>
            </div>


        </div>
        <div class="layui-tab-item ">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md5" style="padding-right: 0">
                    <div class="layui-card">
                        <div class="layui-card-header layui-icon layui-icon-group" style="text-align: center">
                            高风险虚开企业名单
                        </div>
                        <div class="layui-card-body">
                            <table id="test-table-xk1" lay-filter="test-table-xk"></table>
                            <script type="text/html" id="zizeng1">
                                {{d.LAY_TABLE_INDEX+1}}
                            </script>
                        </div>

                    </div>
                </div>
                <div class="layui-col-md7">
                    <div class="layui-card">


                        <!--                            <div id="xk-yhhx-1"-->
                        <!--                                 style=" width: 100%;display: block"></div>-->
                        <div class="layui-card-header layui-icon layui-icon-link" style="text-align: center">
                            高风险虚开企业详情

                        </div>
                        <div class="layui-card-body ">
                            <div id="echats-title1" style=" text-align:center;
                            width: 100%;
                            font-weight: bold;
                            /*padding-top: 50px;*/
                            font-size: 20px;
                            position: absolute;
                            z-index: 1000">
                                <span id="nsrxx-msg1"></span>
                            </div>
                            <div id="xk-yhhx-11"
                                 style=" width: 100%;"></div>

                        </div>


                    </div>


                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-row layui-col-space15">
                    <!--    <div class="layui-col-md8">-->
                    <!--      <div class="layui-row layui-col-space15">-->

                    <div class="layui-col-md6">

                        <div class="layui-card">
                            <div class="layui-card-header">高风险虚开企业名单</div>
                            <div class="layui-card-body">
                                <table id="test-table-xk2" lay-filter="test-table-xk"></table>
                                <script type="text/html" id="zizeng2">
                                    {{d.LAY_TABLE_INDEX+1}}
                                </script>
                            </div>

                        </div>
                    </div>
                    <!--      </div>-->
                    <!--    </div>-->

                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">高风险虚开企业详情</div>
                            <div class="layui-card-body ">
                                <div id="xk-yhhx-2" style="height: 450px;width: 100%;display: block"></div>

                            </div>
                        </div>


                    </div>

                </div>
            </div>
        </div>
    </div>

</div>


<script>

    function changeStatus() {
        $("#status").css("display", '')
    }

    // sql查询
    function search(obj) {
        // 获取虚开数据
        let dataArr = [];
        $.ajax({
            url: layui.setter.hostAddr + `/portal/sql/select`,
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(obj),
            async: false,
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("Authorization", layui.data('layuiAdmin').Authorization);
            },
            type: 'POST',
            success: function (res) {
                dataArr = res.data
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                //通常情况下textStatus和errorThrown只有其中一个包含信息
                console.log(textStatus);   //调用本次ajax请求时传递的options参数
                console.log(errorThrown);   //调用本次ajax请求时传递的options参数
                doFail()
            }

        })
        return dataArr
    }

    let sqlobj = {
        "sql": `select  DISTINCT on (nsrsbh,nsrmc) nsrsbh,nsrmc, cast(djxh as varchar) djxh
            from xcdw_app.app_xkyc_fxnsrtzz where ssyf between '202010' and  '202012'  `,
        "keyword": ""
    }
    let tableData = search(sqlobj)

    let allTzObj = search({
        "sql": `select * from xcdw_dim.dim_nsrfxtzz`,
        "keyword": ""
    })

    var fxtzObj, currentNsr, djxh;

    let echarts = layui.echarts;
    // 指定图表的配置项和数据

    let color = [
        // '#00ffff',
        // '#00cfff',
        // '#1abc9c',
        // '#006ced',
        // '#9b59b6',
        // '#3498db',
        // '#ffe000',
        // '#ffa800',
        // '#ff5b00',
        '#2b8a3e',
        '#c92a2a',
        // '#ff3000'
    ]

    layui.use(['admin', 'table', 'echarts', 'imgBase64'], function () {
        var table = layui.table;
        var admin = layui.admin;
        var view = layui.view;
        var echarts = layui.echarts,
            $ = layui.jquery,
            imgBase64 = layui.imgBase64;
        table.render({
            elem: '#test-table-xk'
            // , url: './json/table/user.js'
            , data: tableData
            , page: true
            // ,cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {
                    field: 'zizeng',
                    width: 60,
                    title: '序号',
                    event: 'setnsrsbh',
                    type: 'numbers',
                    fixed: 'left',
                    templet: '#zizeng'
                }
                , {field: 'nsrsbh', width: 100, title: '纳税人识别号', event: 'setnsrsbh', style: 'cursor: pointer;'}
                , {field: 'nsrmc', event: 'setnsrsbh', title: '纳税人名称'}
                , {field: 'djxh', event: 'setnsrsbh', title: '登记序号', hide: true}
            ]]
            , height: 'full-280'
        });

        //监听单元格事件
        table.on('tool(test-table-xk)', function (obj) {
            debugger
            let data = obj.data;
            djxh = data.djxh
            var elementsLis = []
            if (obj.event === 'setnsrsbh') {
                var nsrobj = {
                    'sql': `select  DISTINCT(a.fxtzznrms),b.tzz_mc ,b.tzz_dm
                            from xcdw_app.app_xkyc_fxnsrtzz a
                            left join xcdw_dim.dim_nsrfxtzz b  on a.tzz_dm = b.tzz_dm
                            where ssyf between '202010' and  '202012' and nsrsbh = '${data.nsrsbh}'`,
                    "keyword": ""
                }
                console.log(nsrobj.sql)
                currentNsr = data.nsrmc
                fxtzObj = search(nsrobj)
                buildEcharts(fxtzObj)

            }

        });
        let titlrJq = $('#nsrxx-msg')
        titlrJq.on('click', function (obj) {
            let djxh_sql = {
                "sql": `SELECT COALESCE
                                ( M.shxydm, M.nsrsbh ) nsrsbh,
                                M.nsrmc nsrmc,
                                h.HYMC hy_mc,
                                d.DJZCLXMC djzclx_mc,
                                j.JDXZMC jdxz_mc,
                                SY.SWRYXM ssgly_mc,
                                s.swjg_mc swjg_mc
                                FROM
                                XCDW_ODS.DJ_NSRXX
                                M LEFT JOIN xcdw_dim.dim_swjg s ON M.ZGSWSKFJ_DM = s.swjg_dm
                                LEFT JOIN XCDW_DIM.DIM_DJZCLX D ON M.DJZCLX_DM = D.DJZCLX_DM
                                LEFT JOIN XCDW_DIM.DIM_HY H ON M.HY_DM = H.HY_DM
                                LEFT JOIN XCDW_ODS.DM_GY_JDXZ J ON M.JDXZ_DM = J.JDXZ_DM
                                LEFT JOIN XCDW_ODS.DM_GY_SWRY SY ON M.SSGLY_DM = SY.SWRY_DM
                                WHERE
                                1 = 1
                                AND M.djxh = '${djxh}'`,
                "keyword": ""
            }
            console.log(djxh_sql.sql)
            let nsrxx = search(djxh_sql)[0]
            let nsrxxDz = {
                "ssgly_mc": "税收管理员",
                "nsrsbh": "纳税人识别号",
                "djzclx_mc": "登记注册类型",
                "jdxz_mc": "街道乡镇名称",
                "hy_mc": "行业名称",
                "nsrmc": "纳税人名称",
                "swjg_mc": "税务机关名称"
            }
            let nsrxxTemplet = `<div style="padding: 20px; line-height: 22px; color: #000; font-weight: 300;">`
            for (let key in nsrxx) {
                nsrxxTemplet += `
                        <p> <b>${nsrxxDz[key]}</b>：${nsrxx[key]}</p>
                    `
            }
            nsrxxTemplet += '</div>'
            // console.log(JSON.stringify(nsrxx))
            // todo 弹出纳税人信息
            layer.open({
                title: '纳税人信息'
                , skin: 'layui-layer-lan'
                , type: 1
                , area: '400px'
                , fixed: false //不固定
                , maxmin: true
                , offset: 'ct'
                , id: 'nsr'
                , content: nsrxxTemplet
                , btn: '关闭'
                , btnAlign: 'c'
                , shade: 0.2
                , yes: function () {
                    layer.closeAll();
                }
            });
        })
        // 隐藏左侧表格111
        $("#xk-tb-icon").on('click',
            function () {
                // alert(1)
                let iconJq = $("#xk-tb-icon"),
                    tableJq = $("#xk-table-zjjy"),
                    chartJq = $("#xk-chart-zjjy");
                // tableJq.slideToggle("fast");
                tableJq.toggle();
                let iconCls = iconJq.hasClass('layui-icon-shrink-right')
                if (iconCls) {
                    // 隐藏
                    iconJq.removeClass('layui-icon-shrink-right')
                    iconJq.addClass('layui-icon-spread-left')
                    chartJq.removeClass('layui-col-md7')
                    chartJq.addClass('layui-col-md12')
                } else {
                    // 显示
                    iconJq.removeClass('layui-icon-spread-left')
                    iconJq.addClass('layui-icon-shrink-right')
                    chartJq.removeClass('layui-col-md12')
                    chartJq.addClass('layui-col-md7')
                }
                var myEvent = new Event('resize');
                window.dispatchEvent(myEvent);
            })


        function setChartsHeight() {
            let layuiBodyHeight = $('div[lay-id="test-table-xk"]').height();
            // console.log(layuiBodyHeight)
            $('#xk-yhhx-1').css("height", layuiBodyHeight + 1 + 'px')
            $('#echats-title').css("padding-top", layuiBodyHeight / 25 + 'px')

        }

        function setChartsTitle() {
            // let titlrJq = $('#nsrxx-msg')
            titlrJq.text(" " + currentNsr);
        }

        // function setChartsHeight() {
        //     let layuiBodyHeight = $('div[lay-id="test-table-xk"]').height();
        //     console.log(layuiBodyHeight)
        //     $('#xk-yhhx-1').css("height", layuiBodyHeight + 1 + 'px')
        //
        // }

        function buildEcharts(fxtzObj) {
            //设置标题
            setChartsTitle()
            //设置高度
            setChartsHeight();
            let myChart = echarts.init(document.getElementById('xk-yhhx-1'));
            myChart.clear()
            let dataArr = [];
            let haveTz = []
            let tzLis = []
            // console.log(fxtzObj)
            fxtzObj.forEach((item, index) => {
                if (haveTz.indexOf(item.tzz_dm) === -1) {
                    haveTz.push(item.tzz_dm)
                }
                if (tzLis.indexOf(item.tzz_mc) === -1) {
                    tzLis.push(item.tzz_mc)
                }
            })
            for (var i = 0; i < allTzObj.length; i++) {
                dataArr.push({
                    value: 921,
                    name: allTzObj[i].tzz_mc,
                    itemStyle: {
                        normal: {
                            color: haveTz.indexOf(allTzObj[i].tzz_dm) === -1 ? color[0] : color[1]
                        }
                    }
                })
            }
            let seriesOption = [{
                name: '',
                type: 'pie',
                clockWise: false,
                avoidLabelOverlap: true,
                radius: [105, 109],
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'outside',
                            fontSize: 8,
                            rich: {
                                a: {
                                    fontSize: 12,
                                    //lineHeight: myFontSize,
                                }
                            },
                            formatter: '\n{a|{b}}\n',
                        },
                        labelLine: {
                            length: 30,
                            length2: 60,
                            show: true,
                            color: '#00ffff'
                        }
                    }
                },
                data: dataArr
            }];
            let option = {
                // backgroundColor: '#0A2E5D', // 背景颜色,白
                // title: {
                //     text: currentNsr,
                //     link: "http://baidu.com/",//点击标题内容要跳转的链接
                //     target: "blank",//跳转链接打开方式，blank是新窗口打开，self是自身窗口打开，跟a标签一样
                //     textStyle: {
                //         color: '#707071',
                //     },
                //     left: 'center',
                //     top: '5%'
                //     // color:'#ddd'
                // },
                color: color,
                graphic: {
                    elements: [{
                        type: "image",
                        z: 3,
                        style: {
                            image: imgBase64.img,
                            width: 178,
                            height: 178
                        },
                        left: 'center',
                        top: 'center',
                        position: [100, 100]
                    },
                        {
                            type: "image",
                            z: 4,
                            style: {
                                image: imgBase64.imgSrc,
                                width: 128,
                                height: 178
                            },
                            left: 'center',
                            top: 'center',
                            position: [100, 100]
                        }]
                },
                tooltip: {
                    show: false
                },
                toolbox: {
                    show: false
                },
                series: seriesOption
            }

            window.addEventListener("resize", function () {
                setTimeout(function () {
                    let tagTitle = $('#LAY_app_tabsheader li.layui-this span').text()
                    setChartsHeight()
                    if (tagTitle === title) {
                        myChart.resize();
                    }
                }, 200)

            });


            myChart.setOption(option);

            myChart.off('click');
            myChart.on('click', function (params) {


                let fxtzDetail = "<div style=\"padding: 20px; line-height: 22px; color: #000; font-weight: 300;\">"
                let tzName = params.name;
                fxtzObj.forEach((item, index) => {
                    debugger
                    if (item.tzz_mc === tzName) {
                        fxtzDetail += `<p>${item.fxtzznrms}</p>`
                    }
                    if (index === fxtzObj.length - 1) {
                        fxtzDetail += `</div>`
                    }
                })
                debugger
                if (tzLis.indexOf(tzName) != -1) {
                    layer.open({
                        title: tzName
                        , skin: 'layui-layer-lan'
                        , type: 1
                        , area: '400px'
                        , fixed: false //不固定
                        , maxmin: true
                        , offset: 'ct'
                        , id: 'help'
                        , content: fxtzDetail
                        // , content: `<!--<p>你好<br/>世界</p>-->`
                        , btn: '关闭'
                        , btnAlign: 'c'
                        , shade: 0.2
                        , yes: function () {
                            layer.closeAll();
                        }
                    });
                }

            });

        }

        // 主动触发首次进入事件
        $('tr:eq(1) td:eq(1)').click()


    });


</script>




